import React, { Component} from 'react';
import styles from './styles.less'
import { Button, Modal, Form, Input,Tabs} from 'antd'
import Left from './Left/index'
import Register from '../Register/index'
import * as METHOD from '@component/smartlab-login-component/index'
import method_RegExp from '@component/smartlab-login-component/method/resExp.js';
import { connect } from 'react-redux';
import * as actions from './store/action';
import logoImg from '../../assets/logo.png'
const { TabPane } = Tabs;
class Index extends Component {
    state={
        deleteVisible:false,
        deleteVisible1:false,
        windowHeight: 0,
        key: undefined
    }
    componentDidMount() {
        this.setState({
            windowHeight: window.innerWidth /4
        })
       window.addEventListener("resize",this.changeWidth)
      }
      componentWillUnmount() {
        window.removeEventListener("resize",this.changeWidth);
      }
      changeWidth = (e) => {
          const screenWidth = e.target.innerWidth;
          if (screenWidth <= 768) {
              this.setState({
                  windowHeight: screenWidth /4
              })
          } else if (screenWidth >= 1300) {
              this.setState({
                  windowHeight: screenWidth /4
              })
          } else if (768 < screenWidth < 1300) {
              this.setState({
                  windowHeight: screenWidth /4
              })
          }
      }
    cancelVisible = () => {
        this.setState({
            deleteVisible: false
        })
    }
    onFormCreateOk=(value)=>{
        const obj={
            phone:value.phone,
            password:value.password,
        }
        this.props.editPassword(obj)
        this.setState({
            deleteVisible1: false
        })
    }
    render() {
        return (
              <div className={styles.div_body}>
                <div className={styles.div_body1}>
                    <div>
                        <img src={logoImg} style={{width:"390px",height:"90px"}}/>
                    </div>
                    <div><h1 style={{fontSize: `calc(${this.state.windowHeight}%)`}}>小智点餐服务平台</h1></div>
                </div>
                <div className={styles.div_body2}>
                        <div className={styles.div_body_left}>
                            <Left/>
                        </div>
                        <div className={styles.div_body_right}>
                            <div className={styles.div_body_middle1_top}>
                                <div className={styles.div_body_middle1_top_top}>
                                    <h1>欢迎登录</h1>
                                </div>
                                <div className={styles.div_body_middle1_top_bottom}> 
                                    <div className={styles.div_body_middle1_top1}>
                                      <METHOD.LoginOther />
                                    </div>
                                    <div className={styles.div_body_middle1_top2}>
                                        <div onClick={() => {  this.setState({deleteVisible: true})}}><a >立即注册</a></div>
                                        <div onClick={() => {  this.setState({deleteVisible1: true})}}><a>忘记密码</a></div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                <Modal
                    title="用户注册"
                    centered
                    visible={this.state.deleteVisible}
                    onCancel={() => this.setState({ deleteVisible: false })}
                    closable={false}
                    footer={null}
                    destroyOnClose={true}
                    width={500}
                >
                    <Register
                         cancelVisible ={this.cancelVisible }
                    />
                </Modal>
                <Modal
                    title="找回密码"
                    centered
                    visible={this.state.deleteVisible1}
                    onCancel={() => this.setState({deleteVisible1: false})}
                    closable={false}
                    footer={null}
                    width={500}
                    destroyOnClose={true}
                >
                    <Form
                        onFinish={this.onFormCreateOk}
                    >
                         <Form.Item
                            name={["phone"]}
                            rules={[
                                { required: true, message: '请填写用户手机号' }
                            ]}
                        >
                            <Input placeholder='请填写用户手机号'
                                style={{
                                    marginBottom:"1vh",
                                    height:"5vh"
                                }}
                             />
                        </Form.Item>
                        <Form.Item
                             name={['password']}
                             rules= {[
                                   { required: true, message: '请输入新密码' },
                                   { pattern: method_RegExp("chinese"), message: "密码中不可包含汉字" },
                                   { min: 6, message: "密码长度最少为6位" },
                                   { max: 18, message: "密码长度最多为18位" }
                             ]}
                             
                        >
                            <Input 
                                placeholder='新密码设置不可为空！' 
                                style={{
                                    marginBottom:"1vh",
                                    height:"5vh"
                                }}
                            />
                        </Form.Item>
                        <Form.Item
                             name={["okPassword"]} 
                             rules={ [
                                   { required: true, message: '请确认您的新密码！' },
                                   ({ getFieldValue }) => ({
                                         validator(rule, value) {
                                               if (!value || getFieldValue("password") === value) {
                                                     return Promise.resolve();
                                               };
                                               return Promise.reject("新密码和确认密码不相同！")
                                         }
                                   })
                             ]}
                        >
                            <Input
                                 placeholder='请确认您的新密码！'
                                 style={{
                                    marginBottom:"1vh",
                                    height:"5vh"
                              }}
                             />
                        </Form.Item>
                        <Form.Item >
                            <Button 
                                    type="primary" 
                                    htmlType="submit"
                                    block
                                    style={{
                                          borderRadius: "10px",
                                          color: "#fff",
                                          background: "rgb(81, 175, 230)",
                                          height:"5vh",
                                          marginBottom:"1vh",
                  
                                          }}
                            >提交</Button>
                        </Form.Item>
                    </Form>
                </Modal>
              </div>
        );
    } 
    
}

const mapDispatchToProps = dispatch => ({
    //重置密码
    editPassword(value){
      dispatch(actions.editPassword(value))
  },
  
})
export default connect(null, mapDispatchToProps)(Index);
